<template>
  <ex-dialog width="1200px" class="ex-diolog" :title="title" :visible="visible" :close-on-click-modal="false"
    @closeDialog="handleClose">
    <div class="main" v-loading="loading">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm"
        :disabled="disabled">
        <el-row>
          <el-col :span="18">
            <el-form-item label="负责人级别：" prop="levelType">
              <el-select v-model="ruleForm.levelType" filterable placeholder="请选择" size="small"
                @change="getPersonUpList" :disabled="pathType == 'edit' && underlingNum > 0">
                <el-option v-for="item in personLevelList" :key="item.id" :label="item.value" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-if="ruleForm.levelType == '1'" label="部门名称：" prop="deptName" :key="1">
              <el-input v-model="ruleForm.deptName" placeholder="请输入" clearable style="width:500px"
                :disabled="pathType == 'edit' && underlingNum > 0" />
            </el-form-item>
            <el-form-item v-if="ruleForm.levelType == '2' || ruleForm.levelType == '3'" label="上级负责人：" prop="parentId"
              :key="2">
              <el-select v-model="ruleForm.parentId" filterable placeholder="请选择" size="small"
                :disabled="pathType == 'edit' && underlingNum > 0">
                <el-option v-for="item in personUpList" :key="item.id" :label="item.value" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="选择负责人：" prop="ids" v-if="ruleForm.levelType == '1'">
              <el-select v-model="ruleForm.ids" filterable placeholder="请选择" size="small" @change="selectorIds"
                :disabled="pathType == 'edit'">
                <el-option v-for="item in userList" :key="item.id" :label="item.phonenumber + '-' + item.nickName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="选择负责人：" prop="idList" v-if="ruleForm.levelType == '2' || ruleForm.levelType == '3'">
              <el-select v-model="ruleForm.idList" filterable multiple placeholder="请选择" size="small"
                :disabled="pathType == 'edit'">
                <el-option v-for="item in userList" :key="item.id" :label="item.phonenumber + '-' + item.nickName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="负责人权限:" prop="">
              <el-checkbox-group v-model="ruleForm.authorityList">
                <el-checkbox v-for="item in principalList" :label="item.authorityType" :key="item.authorityType"
                  :disabled="item.status == 1 && item.authorityType == '6' && pathType == 'edit'">
                  {{ item.authorityName }}
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="button_box">
      <el-button type="primary" :loading="AgreeLoading" @click="submitForm('ruleForm')">保存提交</el-button>
      <el-button @click="handleClose">取消</el-button>
    </div>
  </ex-dialog>
</template>
<script>
import Loading from "@/components/Loading/index";
// api
import {
  addPerson,
  editPerson,
  authorityList,
  userList,
  personUpList,
  personInfo,
  personUnderling,
} from "@/api/customer/principalList";
import '@wangeditor/editor/dist/css/style.css'
import {
  Editor,
  Toolbar
} from "@wangeditor/editor-for-vue";
export default {
  components: {
    Loading,
    Editor,
    Toolbar
  },
  props: {
    visible: Boolean,
    id: String,
    pathType: String,
  },
  data() {
    return {
      labelWidth: "150px",
      inputWidth: "420px",
      title: "添加负责人",
      loading: false,
      disabled: false,
      AgreeLoading: false,
      ruleForm: {
        levelType: '',// 负责人级别 1 部门负责人 2 部门主管 3 部门成员
        deptName: '',//部门名称
        parentId: '',//上级负责人id
        idList: [], //	用户id
        ids: '',
        authorityList: [], //活动图片
        id: '',
      },
      personLevelList: [],
      personUpList: [],  //上级负责人
      userList: [],
      principalList: [],
      underlingNum: 0,//获取下属人数
      rules: {
        levelType: [
          { required: true, message: "请选择", trigger: ["change", "bulr"] }
        ],
        idList: [
          { required: true, message: "请选择", trigger: ["change", "bulr"] }
        ],
        ids: [
          { required: true, message: "请选择", trigger: ["change", "bulr"] }
        ],
        deptName: [
          { required: true, message: "请输入", trigger: ["change", "bulr"] }
        ],
        parentId: [
          { required: true, message: "请选择", trigger: ["change", "bulr"] }
        ],
        authorityList: [
          { required: true, message: "请选择负责人权限", trigger: ["change"] }
        ],
      },
    };
  },
  computed: {},
  created() {
    console.log('this.id', this.id)
    console.log('this.pathType', this.pathType)
    this.getDict()
    this.getUser()
    this.getauthorityList()
    if (this.pathType == 'edit') {
      this.title = '编辑负责人'
      this.ruleForm.idList.push(this.id)
      this.ruleForm.ids = this.id
      this.ruleForm.id = this.id
      this.getPersonInfo()
      this.getPersonUnderling()
    }

  },
  mounted() {

  },
  computed: {},
  methods: {
    //获取状态字典
    getDict() {
      var dictType = "person_level_type";
      this.$getSelectList(dictType)
        .then((res) => {
          this.personLevelList = res.result[0].dictList
        })
        .finally(() => {

        });

    },
    //负责人信息详情
    getPersonInfo() {
      personInfo(this.id).then(res => {
        this.ruleForm.levelType = res.result.levelType
        this.ruleForm.deptName = res.result.deptName
        if (res.result.parentId != '0')
          this.ruleForm.parentId = res.result.parentId
        this.getPersonUpList1(this.ruleForm.levelType)
      })
    },
    //负责人信息详情
    getPersonUnderling() {
      personUnderling(this.id).then(res => {
        this.underlingNum = res.result
      })
    },
    //负责人列表
    getUser() {
      var params = {
        id: this.id
      }
      userList(params).then(res => {
        this.userList = res.result
      })
    },
    //上级负责人列表
    getPersonUpList1(e) {
      console.log(e);
      var params = {
        levelType: e - 1
      }
      personUpList(params).then(res => {
        this.personUpList = res.result
      })
    },
    //上级负责人列表
    getPersonUpList(e) {
      console.log(e);
      var params = {
        levelType: e - 1
      }
      this.ruleForm.parentId = ''
      personUpList(params).then(res => {
        this.personUpList = res.result
      })
    },
    //获取权限列表
    getauthorityList() {
      var params = {
        id: this.id
      }
      authorityList(params).then(res => {
        this.principalList = res.result
        if (this.id) {
          this.principalList.map(item => {
            if (item.status == 1) {
              this.ruleForm.authorityList.push(item.authorityType)
            }
          })
        }
      })
    },
    selectorIds(e) {
      console.log(e);
      this.ruleForm.idList = []
      this.ruleForm.idList.push(e)
    },
    //取消
    handleClose(formName) {
      this.$emit("update:visible", false);
    },
    submitForm(formName) {
      console.log(this.ruleForm);
      //创建确定
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.AgreeLoading = true
          var data = {
            ...this.ruleForm
          }
          if (this.pathType == 'add') {
            addPerson(data).then(res => {
              setTimeout(() => {
                this.handleClose()
                this.$message.success('创建成功')
                this.$emit('success')
                this.AgreeLoading = false
              }, 1000);
            }).finally(() => {
              this.AgreeLoading = false
            })
          } else if (this.pathType == 'edit') {
            editPerson(data).then(res => {
              setTimeout(() => {
                this.handleClose()
                this.$message.success('修改成功')
                this.$emit('success')
                this.AgreeLoading = false
              }, 1000);
            }).finally(() => {
              this.AgreeLoading = false
            })
          }

        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  }
};
</script>
<style lang="scss" scoped>
.ex-diolog {
  ::v-deep .ex--dialog--footer {
    border: none !important;
    padding: 0 !important;
  }

  ::v-deep .ex--dialog--main {
    padding: 10px 20px !important;
  }
}

.main {
  padding: 20px 20px;
}

.button_box {
  display: flex;
  justify-content: center;
}

.el-select {
  width: 500px !important;
}
</style>
